<template>
  <a-card title="新闻添加">
    <a-form
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="rules"
      ref="formRef"
    >
      <a-form-item label="标题" name="title">
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item label="类别" name="category">
        <a-radio-group v-model:value="formState.category" name="radioGroup">
          <a-radio
            :value="item.value"
            v-for="item in newsTypeList"
            :key="item._id"
            >{{ item.label }}</a-radio
          >
        </a-radio-group>
      </a-form-item>
      <a-form-item label="文本格式" name="editorType">
        <a-radio-group v-model:value="formState.editorType">
          <a-radio
            :value="item.value"
            v-for="item in editTypeMaps"
            :key="item.value"
            >{{ item.label }}</a-radio
          >
        </a-radio-group>
      </a-form-item>
      <a-form-item label="内容">
        <WangEditor
          v-model:value.lazy="formState.content"
          :mode="mode"
          v-if="!formState.editorType"
        >
        </WangEditor>
        <MackdownEditor v-else v-model:value.lazy="formState.content" />
      </a-form-item>
      <a-form-item label="封面">
        <Upload v-model:value.lazy="formState.cover"></Upload>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">创建</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";

import WangEditor from "@/components/WangEditor";
import MackdownEditor from "@/components/MackdownEditor";
import Upload from "@/components/Upload";
import { addNews } from "@/api/news";
import { getDictList } from "@/api/dict";
import { editTypeMaps } from "@/utils/dict";

const router = useRouter();

const formRef = ref();

const rules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  editorType: [{ required: true, message: "请选择", trigger: "blur" }],
  type: [{ required: true, message: "请选择类型", trigger: "blur" }],
  cover: [{ required: true, message: "请上传封面", trigger: "blur" }],
  category: [{ required: true, message: "请选择分类", trigger: "blur" }],
});

const labelCol = { span: 4 };
const wrapperCol = { span: 20 };
const mode = "simple";
const newsTypeList = ref([]);
const formState = ref({
  title: "", // 标题
  content: "", // 内容
  category: "", // 类别
  cover: "", // 封面
  editorType: 0, // mackdown 1 富文本
});

// 提交
const onSubmit = async () => {
  formRef.value.validate().then(async () => {
    console.log("formState", formState.value);
    const { success, msg } = await addNews(formState.value);
    if (success) {
      message.success(msg);
      router.push({ path: "/news-manage" });
    } else {
      message.error(msg);
    }
  });
};

/**
 * 获取字典列表
 */
const getDictListFun = async (data) => {
  return await getDictList(data);
};

onMounted(async () => {
  const newsTypeRes = await getDictListFun({
    name: "newsType",
  });
  if (newsTypeRes.success) {
    newsTypeList.value = newsTypeRes.data || [];
  } else {
    newsTypeList.value = [];
  }
});
</script>


